<template>
	<view class="content">
		<!-- 产品 -->
		<view class="rela-modul">
			<view class="head">
				<view class="left">
					<image class="img" src="../../../static/images/icon_product_gray.png" mode="aspectFill"></image>
					<text class="text">产品</text>
				</view>
			</view>
			<!-- 产品循环 -->
			<view class="prod-box" v-for="(item, index) in list">
				<view class="item">
					<text class="text large">名称</text>
					<text class="text">{{item.productName}}</text>
				</view>
				<view class="item">
					<text class="text">单价</text>
					<text class="text">￥{{item.price}}</text>
				</view>
				<view class="item">
					<text class="text">售价</text>
					<text class="text">￥{{item.salesPrice}}</text>
				</view>
				<view class="item">
					<text class="text">数量</text>
					<text class="text">x {{item.num}}</text>
				</view>
				<view class="item">
					<text class="text">折扣</text>
					<text class="text">{{item.discount}}%</text>
				</view>
				<view class="item">
					<text class="text">小计</text>
					<text class="text money">￥{{item.subtotal}}</text>
				</view>
			</view>
			 
			<!-- 产品总计 -->
			<view class="prod-box total-box">
				<!-- <view class="item">
					<text class="text">整单折扣</text>
					<text class="text">0%</text>
				</view> -->
				<view class="item">
					<text class="text">合计</text>
					<text class="text money">￥{{totalMoney}}</text>
				</view>
			</view>
		</view>
		<!-- 相关团队 -->
		<!-- <view class="rela-modul">
			<view class="head">
				<view class="left">
					<image class="img" src="../../../static/images/icon_contact.png" mode="aspectFill"></image>
					<text class="text">相关团队</text>
				</view>
				<view class="right">
					<image class="img" src="../../../static/images/icon_pens.png" mode="aspectFill"></image>
					<text class="text">新建</text>
				</view>
			</view>
			<view class="team-list">
				<view class="item">
					<view class="left">
						<view class="head-box">in</view>
						<view class="info">
							<text class="name">admin</text>
							<text class="title">全公司</text>
						</view>
					</view>
					<view class="right">
						<text class="text">负责人</text>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalMoney:0.00,
				list:[],
				progress: '80%', // 进度条
			}
		},
		onLoad() {
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			getProductList(list){
				this.list=list;
				var that=this;
				setTimeout(function(){
					that.totalMoney=0.00;
					that.list.forEach(function(element) { 
						that.totalMoney+=parseFloat(element.subtotal)
						
					})
					console.log(that.totalMoney);
					that.totalMoney=that.totalMoney.toFixed(2);
				},500);
				
			},
			// 拨打电话
			callPhone(tel){
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background: #fff;
		.rela-modul{
			margin-bottom: 20upx;
			.head{
				padding: 20upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f7f7f7;
				.left{
					display: flex;
					align-items: center;
					.img{
						width: 40upx;
						height: 40upx;
						margin-right: 20upx;
					}
					.text{
						font-size: 30upx;
						color: #333;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.img{
						width: 30upx;
						height: 30upx;
						margin-right: 20upx;
					}
					.text{
						font-size: 30upx;
						color: #2172FF;
					}
				}
			}
			// 产品
			.prod-box{
				padding: 0 30upx;
				border-bottom: 1px solid #f7f7f7;
				// 产品合计
				&.total-box{
					border-bottom: none;
				}
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10upx 0;
					.text{
						font-size: 24upx;
						color: #999;
						&.large{
							font-size: 30upx;
							color: #333;
						}
						&.money{
							font-size: 32upx;
							color: #E6A23C;
							font-weight: bold;
						}
					}
				}
			}
			// 相关团队
			.team-list{
				padding: 0 30upx;
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20upx 0;
					border-bottom: 1px solid #f7f7f7;
					&:last-child{
						border-bottom: none;
					}
					.left{
						display: flex;
						align-items: center;
						.head-box{
							width: 80upx;
							height: 80upx;
							line-height: 80upx;
							border-radius: 50%;
							background: #0aAC44;
							font-size: 30upx;
							color: #fff;
							text-align: center;
							margin-right: 20upx;
							.img{
								width: 100%;
								height: 100%;
							}
						}
						.info{
							height: 60upx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.name{
								font-size: 30upx;
								line-height: 1;
								color: #000;
							}
							.title{
								font-size: 24upx;
								line-height: 1;
								color: #666;
							}
						}
					}
					.right{
						height: 80upx;
						.text{
							font-size: 30upx;
							color: #999;
						}
					}
				}
			}
			// 合同
			.contract-list{
				padding: 0 30upx;
				.item{
					padding: 20upx 0;
					border-bottom: 1px solid #f7f7f7;
					line-height: 1.6;
					&:last-child{
						border-bottom: none;
					}
					.name{
						font-size: 32upx;
						color: #000;
					}
					.num{
						font-size: 30upx;
						color: #999;
					}
					.rate{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 90%;
							display: flex;
							align-items: center;
							.text{
								font-size: 30upx;
								color: #999;
							}
							.progress-box{
								display: flex;
								width: 60%;
								margin-left: 20upx;
							}
						}
						.money{
							font-size: 32upx;
							color: #E6A23C;
							font-weight: bold;
						}
					}
					.status{
						font-size: 32upx;
						color: #2172FF;
					}
				}
			}
		}
	}
</style>
